<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>消费明细</title>
<link rel="stylesheet" href="__HOME__/css/public_style.css">
<style>
	html,body{width:100%;height:100%;}
	/*-- 返回 --*/
	.ding_bg{
		height:52px;
		background-image: -moz-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
		background-image: -webkit-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
		background-image: -ms-linear-gradient( 0deg, rgb(26,85,203) 0%, rgb(110,119,255) 100%);
	}
	.ding_bg>p{text-align:center;color:#fff;float:left;width:calc(100% - 104px);line-height:52px;}
	.fanhui{padding:20px;height:12px;width:12px;display:block;float:left;}
	.fanhui>div{border-top:2px solid #fff;border-left:2px solid #fff;height:10px;width:10px;transform:rotate(-45deg);}
	/*-- 返回 --*/
	/*-- 消费明细内容回 --*/
	.spend_box{height:calc(100% - 84px);background-color:#f2f2f2;padding:16px;overflow:auto;}
	.spend_box>ul>li{padding:10px 0;}
	.spend_box>ul>li>p{font-size:12px;color:#aeaeae;line-height:24px;}
	.spend_box>ul>li>ol{padding:6px;background:#fff url(__HOME__/img/xf_jinbbg.png) no-repeat top right;box-shadow:0.624px 2.934px 3.72px 0.28px rgba(0, 0, 0, 0.4);text-indent:10px;}
	.spend_box>ul>li>ol>li{font-size:12px;color:#666;line-height:20px;}
	.spend_box>ul>li>ol>li:nth-of-type(1){color:#333;font-size:16px;line-height:30px;font-weight:bold;}
	.spend_box>ul>li>ol>li:nth-last-of-type(2){border-bottom:1px solid #edebea;color:#e9b945;line-height:30px;}
	.spend_box>ul>li>ol>li:nth-last-of-type(1){color:#ff7d7d;line-height:30px;}
	/*-- 消费明细内容回 --*/
	/*-- 无内容时 --*/
	.null_cont{height:calc(100% - 52px);position:relative;}
	.null_cont>div{position:absolute;left:calc(50% - 160px);top:calc(50% - 165px);width:320px;}
	.null_cont>div>img{width:100%;}
	.null_cont>div>p{position:absolute;color:#999;width:200px;text-align:center;left:calc(50% - 100px);bottom:-20px;}
	/*-- 无内容时 --*/
</style>
</head>

<body>
	<!-- 返回 -->
	<div class="ding_bg">
		<a href="{:url('personal')}" class="fanhui"><div></div></a>
		<p>消费明细</p>
		<h6 class="clearfix"></h6>
	</div>
	<!-- 返回 -->
	<!-- 消费明细内容 -->
	<div class="spend_box">
		<ul>
			<li>
				<p>2018-02-06</p>
				<ol>
					<li>某某某商家</li>
					<li>消费金额为：30元</li>
					<li>实际支付金额为：27元</li>
					<li>积分抵扣：0</li>
					<li>红包抵扣：0</li>
					<li>优惠券：2元</li>
					<li>积分：+20分</li>
					<li>享受折扣：9折</li>
				</ol>
			</li>
			<li>
				<p>2018-02-06</p>
				<ol>
					<li>某某某商家</li>
					<li>消费金额为：30元</li>
					<li>实际支付金额为：27元</li>
					<li>积分抵扣：0</li>
					<li>红包抵扣：0</li>
					<li>优惠券：2元</li>
					<li>积分：+20分</li>
					<li>享受折扣：9折</li>
				</ol>
			</li>
			<li>
				<p>2018-02-06</p>
				<ol>
					<li>某某某商家</li>
					<li>消费金额为：30元</li>
					<li>实际支付金额为：27元</li>
					<li>积分抵扣：0</li>
					<li>红包抵扣：0</li>
					<li>优惠券：2元</li>
					<li>积分：+20分</li>
					<li>享受折扣：9折</li>
				</ol>
			</li>
		</ul>
	</div>
	<!-- 消费明细内容 -->
	<!-- 无内容时 -->
	<div class="null_cont" style="display:none">
		<div>
			<img src="__HOME__/img/xf_kongbg.png" alt="">
			<p>暂无消费明细 赶紧去消费把</p>
		</div>
	</div>
	<!-- 无内容时 -->
</body>
<script src="__HOME__/js/jquery-3.3.1.js"></script>
<script>
</script>
</html>
